<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="../favicon/Async-favicon.ico">
    <link rel="stylesheet" href="./css/reservation.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://unpkg.com/axios@1.6.0/dist/axios.min.js"></script>

    <!-- 引入弹窗模板 -->
    <link rel="stylesheet" href="../sweetalert/sweetalert.css">
    <script src="../sweetalert/sweetalert-dev.js"></script>
    <title>预约</title>
</head>

<body>
    <div class="loader">
        <div class="scanner">
            <span>Loading...</span>
        </div>
    </div>

    <div class="header">
        <!-- 个人信息页面 -->
        <div class="top" onclick="openMenu()" id="userInfoClick">
            <div class="menu-icon" id="menuIcon">
                <i class="fa fa-bars fa-lg" id="userInfoIcon"></i>
            </div>
            <div class="menu-options" id="menuOptions">
                <!-- 个人信息 -->
                <div class="user-info">
                    <div class="user-info-title">
                        <h3><i class="fa fa-user-circle fa-lg"></i>&nbsp;个人信息</h3>
                    </div>
                    <div class="user-info-content">
                        <p>姓名：张三</p>
                        <p>学号：2018302110111</p>
                        <p>专业：软件工程</p>
                        <p>班级：软件1801</p>
                    </div>
                </div>
                <ul class="options">
                    <!-- 修改个人信息 -->
                    <li class="edit-info"><a href="#" onclick="openModal()"><i
                                class="fa fa-edit fa-lg"></i>&nbsp;修改个人信息</a>
                    </li>
                    <!-- 修改信息弹窗 -->
                    <div id="myModal" class="modal">
                        <div class="modal-content">
                            <div class="close-icon">
                                <h2>修改个人信息</h2><span class="close" onclick="closeModal()">&times;</span>
                            </div>

                            <form>
                                <div class="input">
                                    <label for="name">姓名:</label>
                                    <input type="text" id="name" name="name">
                                </div>

                                <div class="input"><label for="studentID">学号:</label>
                                    <input type="text" id="studentID" name="studentID">
                                </div>

                                <div class="input"><label for="major">专业:</label>
                                    <input type="text" id="major" name="major">
                                </div>

                                <div class="input"><label for="class">班级:</label>
                                    <input type="text" id="class" name="class">
                                </div>
                                <div class="input"><label for="email">邮箱:</label>
                                    <input type="text" id="email" name="email">
                                </div>

                                <button type="button" onclick="saveChanges()">保存修改</button>
                            </form>
                        </div>
                    </div>

                    <!-- 重置密码 -->
                    <li><a href="#" onclick="openPwd()"><i class="fa fa-key fa-lg"></i>&nbsp;重置密码</i></a></li>
                    <div class="editPwd">
                        <div class="editPwd-content">
                            <h2>重置密码</h2>
                            <!-- 关闭键 -->
                            <span class="closePwd" onclick="closePwd()">&times;</span>
                            <form>
                                <div class="input inputPwd">
                                    <label for="oldPwd">旧密码:</label>
                                    <input type="password" id="oldPwd" name="oldPwd">
                                </div>

                                <div class="input inputPwd">
                                    <label for="newPwd">新密码:</label>
                                    <input type="password" id="newPwd" name="newPwd">
                                </div>

                                <div class="input inputPwd"><label for="confirmPwd">确认密码:</label>
                                    <input type="password" id="confirmPwd" name="confirmPwd">
                                </div>

                                <button type="button" onclick="savePwd()">保存修改</button>
                        </div>
                    </div>
                    <!-- 退出登录 -->
                    <li><a href="#" onclick="logout()"><i class="fa fa-sign-out fa-lg"></i>&nbsp;退出登录</a></li>
                </ul>
            </div>



        </div>
        <!-- 主页页面 -->
        <div class="top" onclick="homePage()">
            <div class="home" id="home">
                <i class="fa fa-home fa-lg"></i>
            </div>
        </div>

        <!-- 预约页面 -->
        <div class="top">
            <div class="reserve" id="reserve">
                <i class="fa fa-wheelchair-alt fa-lg"></i>
            </div>
        </div>



    </div>
    <!-- container -->
    <div class="container" onclick="closeMenu()">
        <!-- 预约表 -->
        <div class="reservation-table main">
            <div class="reservation-table-title">
                <h2>预约表</h2>
            </div>
            <div class="reservation-table-content">
                <table>
                    <tr>
                        <th>座位号</th>
                        <th>预约时间</th>
                        <th>预约时长</th>
                        <th>预约状态</th>
                        <th>操作</th>
                    </tr>
                    <tr class="reservation-content-inner">
                        <td>A1</td>
                        <td>2021-06-01 12:00:00</td>
                        <td>2小时</td>
                        <td>申请中...</td>
                        <td><button type="button" onclick="cancelReservation()">取消预约</button></td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- 预约信息 -->
        <div class="reservation-info main">
            <div class="reservation-info-title">
                <h2>预约信息</h2>
            </div>
            <div class="reservation-info-content">
                <p>姓名：张三</p>
                <p>学号：2018302110111</p>
                <p>专业：软件工程</p>
                <p>班级：软件1801</p>
                <p>座位号：1</p>
                <p>预约时间：2021-06-01 12:00:00</p>
                <p>预约时长：2小时</p>
            </div>
        </div>

        <!-- 座位表 -->
        <div class="seat-chart main">
            <ul class="row1">
                <li class="seat fa"></li>
                <li class="none"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
            </ul>
            <ul class="row2">
                <li class="seat fa"></li>
                <li class="none"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>

            </ul>
            <ul class="row3">
                <li class="seat fa"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
            </ul>
            <ul class="row4">
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
                <li class="seat fa"></li>
            </ul>
        </div>

    </div>
    <!-- 预约操作 -->

    <div class="reservation-operation">
        <div class="reservation-content">
            <div class="reservation-operation-title">
                <h2>预约操作</h2>
            </div>
            <!-- 关闭键 -->
            <span class="close-reversation" onclick="closeReversation()">&times;</span>
            <div class="reservation-operation-content">
                <form>
                    <div class="input">
                        <label for="seatID">座位号:</label>
                        <select name="" id="seatID">
                            <option value="1">座位号1</option>
                            <option value="2">座位号2</option>
                            <option value="3">座位号3</option>
                            <option value="4">座位号4</option>
                            <option value="5">座位号5</option>
                            <option value="6">座位号6</option>
                            <option value="7">座位号7</option>
                            <option value="8">座位号8</option>
                            <option value="9">座位号9</option>
                            <option value="10">座位号10</option>
                            <option value="11">座位号11</option>
                            <option value="12">座位号12</option>
                            <option value="13">座位号13</option>
                            <option value="14">座位号14</option>
                            <option value="15">座位号15</option>
                            <option value="16">座位号16</option>
                            <option value="17">座位号17</option>
                            <option value="18">座位号18</option>
                            <option value="19">座位号19</option>
                            <option value="20">座位号20</option>
                            <option value="21">座位号21</option>
                            <option value="22">座位号22</option>
                            <option value="23">座位号23</option>
                        </select>
                    </div>
                    <div class="input"><label for="reserveTime">预约时间:</label>
                        <input type="datetime-local" id="reserveTime" name="reserveTime">
                    </div>

                    <div class="input"><label for="reserveDuration">预约时长:</label>
                        <select name="" id="reserveDuration">
                            <option value="1">1小时</option>
                            <option value="2">2小时</option>
                            <option value="3">3小时</option>
                            <option value="4">4小时</option>
                            <option value="5">5小时</option>
                            <option value="24">一天</option>
                            <option value="168">一周</option>
                            <option value="9999">实验室的同学占用</option>
                        </select>
                    </div>

                    <button type="button" onclick="reserve()">预约</button>
                </form>

            </div>
        </div>

    </div>
    <div class="no-reservation">
        <div class="no-reservation-content">
            <h2><i class="fa fa-close"></i><i class="fa fa-close"></i>&nbsp;&nbsp;&nbsp;您还没有预约哦&nbsp;&nbsp;<i
                    class="fa fa-close"></i><i class="fa fa-close"></i></h2>

        </div>

        <button class="pop-up-reservation"><i class="fa fa-send-o fa-"></i>进行预约</button>

        <!-- 座位表 -->
        <div class="seat-chart main">
            <ul class="row1">
                <li class="seat1 fa"></li>
                <li class="none"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
            </ul>
            <ul class="row2">
                <li class="seat1 fa"></li>
                <li class="none"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>

            </ul>
            <ul class="row3">
                <li class="seat1 fa"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
                <li class="none"></li>
            </ul>
            <ul class="row4">
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
                <li class="seat1 fa"></li>
            </ul>
        </div>

        <!-- 查看座位状态 -->
        <div class="seat-status main">
            <div class="seat-status-title">
                <h3>当前座位：</h3>
            </div>
            <div class="seat-status-content">
                <p>座位状态：</p>
                <p>开始时间：</p>
                <p>预约人：</p>
                <p>预约时长：</p>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="footer-title">
            <h3>Async-Lab</h3>
        </div>
        <div class="footer-content">
            <p>地址:信达楼(双A中心)B413</p>
            <a href="https://github.com/Async-Lab" target="_blank">实验室github地址</a></p>
        </div>
    </div>
    <script src="./js/animate.js"></script>
    <script src="./js/editPwd.js"></script>
    <script src="./js/editUserInfo.js"></script>
    <script src="./js/getUserInfoFromBack.js"></script>
    <script src="./js/logout.js"></script>
    <script src="./js/reservation.js"></script>
    <script src="./js/viewSteatStatus.js"></script>
    <script src="./js/userinfoPopup.js"></script>
</body>

</html>